<template>
  <div class="her-details">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" left-arrow title="用户信息" @click-left="$router.back()"></van-nav-bar>

    <!-- 中部上 -->
    <div class="box">
      <div class="average">
        <div class="average-shang">
          <div class="average-shang-left">
            <img class="img" :src="userIdList.pic" alt="" />
          </div>
          <div class="average-shang-center">
            <div class="average_name">
              <strong>{{ userIdList.name }}</strong>
            </div>
            <div class="average_job">{{ userIdList.level + userIdList.jobss }}</div>
            <div class="average_jingli">
              <span>湖南长沙 | </span>
              <span>46岁 | </span>
              <span>7年经验</span>
            </div>
          </div>
          <div class="average-shang-right" @click="attention()">{{ follow ? '已关注' : '关注' }}</div>
        </div>

        <div class="average-zhong">
          <div class="average-zhong-comp">注册公司：{{ userIdList.company }}</div>
          <div class="average-zhong-zhiwei">
            职业：
            <span v-for="(item, index) in userIdList.job" :key="index">{{ item }}</span>
          </div>
        </div>

        <div class="average-xia">
          <div class="average-xia-left">
            <i class="jiazheng icon-anquan1"></i>
            <strong>身份信息已核实</strong>
          </div>
          <div class="average-xia-right">
            <div @click="PromptShow('dianhua')" class="average-xia-right-kuang">电话</div>
            <div @click="PromptShow('weixin')" class="average-xia-right-kuang">微信</div>
          </div>
        </div>
      </div>

      <div class="average_xia">
        <div class="average_xia_one">
          <div>
            <van-collapse v-model="activeNames">
              <van-collapse-item class="average_xia_threes" title="主要技能" name="1">
                <div class="average_xia_ones">
                  <span class="average_xia_one_job" v-for="(item, index) in userIdList.skilledness" :key="index">{{ item }}</span>
                </div>
              </van-collapse-item>
              <van-collapse-item class="average_xia_threes" title="个人简历" name="2">
                <span class="span">{{ userIdList.resume }}</span>
              </van-collapse-item>
              <van-collapse-item class="average_xia_threes" title="个人信息" name="3">
                <div class="average_xia_threes_div">任职公司：{{ userIdList.company }}</div>
                <div class="average_xia_threes_div">籍贯民族：{{ userIdList.nationality }}</div>
                <div class="average_xia_threes_div">生肖属相：{{ userIdList.zodiac }}</div>
                <div class="average_xia_threes_div">星座：摩羯座（12.22~1.19）</div>
                <div class="average_xia_threes_div">出生日期：1977-12-23</div>
                <div class="average_xia_threes_div">学历：{{ userIdList.education }}</div>
              </van-collapse-item>
              <van-collapse-item class="average_xia_threes" title="证件信息" name="4">
                <div class="average_xia_sis">
                  <div class="average_xia_sis_img">
                    <img class="img" src="@/assets/true.png" alt="" />
                  </div>
                  <div class="average_xia_sis_img_zhong">
                    <img class="img" src="@/assets/true.png" alt="" />
                  </div>
                  <div class="average_xia_sis_img">
                    <img class="img" src="@/assets/true.png" alt="" />
                  </div>
                </div>
              </van-collapse-item>
            </van-collapse>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部  标签栏 -->
    <mt-tabbar fixed="fixed">
      <van-grid :column-num="4" clickable>
        <van-grid-item @click="pingjiaShow = true">
          <i icon="icon" class="jiazheng icon-xinwen"></i>
          <span class="text">评价</span>
        </van-grid-item>
        <van-grid-item @click="participationShow = true">
          <i icon="icon" class="jiazheng icon-fenxiang"></i>
          <span class="text">分享</span>
        </van-grid-item>
        <van-grid-item @click="PromptShow('weixing')">
          <i icon="icon" class="jiazheng icon-weixin"></i>
          <span class="text">微信联系</span>
        </van-grid-item>
        <van-grid-item @click="PromptShow('dianhua')">
          <i icon="icon" class="jiazheng icon-dianhua"></i>
          <span class="text">电话联系</span>
        </van-grid-item>
      </van-grid>
    </mt-tabbar>

    <!-- 点击分享弹出层 -->
    <van-share-sheet v-model="participationShow" title="立即分享给好友" :options="options" />

    <!-- 评价弹出层 -->
    <van-popup v-model="pingjiaShow" position="bottom" style="height: 100%">
      <div class="box">
        <van-row>
          <van-nav-bar title="服务评价" @click-left="pingjiaShow = false">
            <template #left>
              <van-icon name="cross" size="18" />
            </template>
          </van-nav-bar>
        </van-row>
        <van-row class="pic_top">
          <van-col class="pic_top_car">
            <img :src="userIdList.pic" alt="" />
          </van-col>
          <span class="span">{{ userIdList.name }}</span>
        </van-row>
        <van-row class="pic_bottom">
          <van-col>
            <span class="spans">亲爱的，感谢您对{{ userIdList.name }}的支持和信任。您的评价是我们前进的无限动力。</span>
          </van-col>
          <van-col class="pingjia_bottom">
            <van-rate v-model="value" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" />
            <div class="div_bottom">
              <span v-if="value < 3">还有需要继续努力！</span>
              <span v-else-if="value > 3">感激支持！</span>
              <span v-else>我会加油的！</span>
            </div>
          </van-col>
          <van-col class="btn">
            <van-button @click="btnShow" round type="warning">提交评价</van-button>
          </van-col>
        </van-row>
      </div>
    </van-popup>
  </div>
</template>

<script>
import '@/mock/px-mock.js'
import { userProfile, userProfileId, follow } from '@/api/px-my'
export default {
  name: 'HerDetails',
  components: {},
  props: {},
  data () {
    return {
      // 关注
      follow: false,
      // 评价
      value: 5,
      // 评价弹出层
      pingjiaShow: false,
      fixed: false,
      // 点击分享弹出层
      participationShow: false,
      activeNames: ['1', '2', '3', '4'],
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '二维码', icon: 'qrcode' },
        ],
      ],
      id: 1,
      userIdList: [],
      // 显示与隐藏
      spanShow_one: true,
      spanShow_two: true,
    }
  },
  computed: {},
  watch: {},
  created () {
    // 获取个人信息
    this.userXinxiId()
    // 刷新回到顶部
    this.top()
  },
  mounted () { },
  methods: {
    // 点击关注发送请求
    async attention () {
      const data = await follow({
        target: {
          id: this.id,
          status: !this.follow
        }
      })
      this.follows()
      this.follow = !this.follow
      if (this.follow) {
        this.$toast('关注成功')
      } else {
        this.$toast('已取消关注')
      }
      //   // setItem('accountId', data.list[index])
      // }
    },
    // 关注列表
    follows () {
      const content = JSON.parse(window.localStorage.getItem('account'))
      const arr = []
      content.list.map((item, index) => {
        if (content.list[index].status) {
          return arr.push(content.list[index])
        }
        this.followList = arr
        const list = JSON.stringify(arr)
        window.localStorage.setItem('FollowList', list)
      })
    },
    // 评价确认取消事件
    btnShow () {
      this.$dialog.confirm({
        title: '服务评价',
        message: '是否提交评价',
      })
        .then(() => {
          // on confirm
          this.$toast('你已评价成功！')
          this.pingjiaShow = false
        })
        .catch(() => {
          // on cancel
        });
    },
    // 回到顶部
    top () {
      // 刷新回到顶部
      window.scrollTo(0, 0);
    },
    // 获取个人家服人员信息
    async userXinxiId () {
      try {
        const id = window.localStorage.getItem('userId')
        this.id = id
        const data = await userProfileId(this.id)
        console.log(data);
        this.userIdList = data.data
        this.follow = data.data.status
      } catch (err) {
        this.toast('获取失败')
      }
    },
    // 获取家服人员信息
    // async userXinxi () {
    //   try {
    //     const data = await userProfile()
    //     console.log(data);
    //   } catch (err) {
    //     this.toast('获取失败')
    //   }
    // },
    // 点击微信或者电话提示框
    PromptShow (index) {
      if (index === 'weixing') {
        this.$dialog.confirm({
          title: '微信',
          message: '确定打开微信？',
        })
          .then(() => {
            // on confirm
            this.$toast('正在打开，请等待...')
          })
          .catch(() => {
            this.$toast('已取消')
            // on cancel
          });
      } else {
        this.$dialog.confirm({
          title: '电话',
          message: '确定电话联系？',
        })
          .then(() => {
            // on confirm
            this.$toast('正在打开，请等待...')
          })
          .catch(() => {
            this.$toast('已取消')
            // on cancel
          });
      }
    }
  }
}
</script>

<style scoped lang="less">
.her-details {
  // 评价弹出层
  /deep/ .van-popup {
    .box {
      height: 100%;
    }
    .pic_bottom {
      padding: 0 30px;
      .spans {
        color: #6b6b6b;
        font-size: 28px;
      }
      .pingjia_bottom {
        margin-top: 50px;
        width: 100%;
        text-align: center;
        .div_bottom {
          margin: 50px;
        }
      }
      .btn {
        display: inline-block;
        width: 100%;
        .van-button {
          width: 100%;
          background-color: #1196db;
        }
        /deep/ .van-button--warning {
          border: 0;
        }
      }
    }
    .van-nav-bar {
      background: #1196db;
      .van-nav-bar__left {
        .van-icon {
          color: #fff;
        }
        .van-nav-bar__text {
          color: #fff;
        }
      }
      .van-nav-bar__title {
        color: #fff;
      }
    }
    .pic_top {
      position: relative;
      width: 100%;
      height: 330px;
      .pic_top_car {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: inline-block;
        border-radius: 130px;
        width: 130px;
        height: 130px;
        background: #1196db;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .span {
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 30px;
        font-weight: 700;
      }
    }
  }
  .van-nav-bar {
    height: 120px;
    background-color: #1196db;
  }
  .mint-tabbar {
    height: 136px;
    z-index: 1000;
    .van-grid {
      width: 100%;
    }
    .box_muet_ciadan {
      width: 100%;
      height: 100%;
    }
    .van-grid-item {
      color: #7b7777;
      border: 0;
      /deep/ .van-grid-item__content {
        padding: 0;
      }
      .text {
        font-size: 24px;
        font-weight: 700;
      }
      .jiazheng {
        font-size: 50px;
        margin-bottom: 7px;
      }
    }
  }

  .box {
    position: relative;
    .average {
      z-index: 100;
      position: absolute;
      top: -20px;
      left: 30px;
      right: 30px;
      border-radius: 7px;
      padding: 20px;
      background-color: #fff;
      /deep/ .average-shang,
      .average-zhong,
      .average-xia {
        background-color: #fff;
      }
      /deep/ .average-shang {
        display: flex;
        .average-shang-left {
          width: 140px;
          height: 140px;
          .img {
            width: 100%;
            height: 100%;
          }
        }
        .average-shang-center {
          width: 318px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin: 0 30px;
          .average_name {
            font-size: 26px;
          }
          .average_job {
            font-size: 22px;
            height: 40px;
            width: 140px;
            color: #1196db;
            line-height: 40px;
            border: 1px solid#1196db;
            border-radius: 40px;
            padding-left: 30px;
          }
          .average_jingli {
            font-size: 20px;
            color: #979191;
          }
        }
        .average-shang-right {
          font-size: 22px;
          height: 40px;
          border-radius: 40px;
          background-color: #1196db;
          padding: 3px 30px;
          line-height: 40px;
          color: #fff;
        }
      }
      .average-zhong {
        font-size: 20px;
        color: #979191;
        .average-zhong-comp {
          margin: 20px 0 10px 0;
        }
        .average-zhong-zhiwei {
          span {
            margin-right: 10px;
          }
        }
      }
      .average-xia {
        display: flex;
        justify-content: space-between;
        height: 100px;
        font-size: 24px;
        vertical-align: middle;
        .average-xia-left {
          display: flex;
          vertical-align: middle;
          line-height: 100px;
          font-size: 26px;
          .jiazheng {
            font-size: 40px;
            color: #1196db;
          }
        }
        .average-xia-right {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .average-xia-right-kuang {
            font-size: 22px;
            height: 40px;
            color: #1196db;
            line-height: 40px;
            padding: 0 40px;
            border: 1px solid #1196db;
            border-radius: 40px;
          }
        }
      }
    }
    .average_xia {
      font-size: 26px;
      background-color: #fff;
      position: absolute;
      top: 390px;
      left: 30px;
      right: 30px;
      border-radius: 7px;
      padding: 20px;
      margin-bottom: 170px;
      .average_xia_one_message,
      .average_xia_two_message,
      .average_xia_three_message,
      .average_xia_si_message {
        border-left: 10px solid #1196db;
        padding-left: 20px;
        margin-bottom: 20px;
      }
      .average_xia_ones {
        margin-bottom: 20px;
        .average_xia_one_job {
          display: inline-block;
          font-size: 22px;
          height: 40px;
          color: #1196db;
          line-height: 40px;
          padding: 0 30px;
          margin: 5px 20px 10px 0;
          border: 1px solid #1196db;
          border-radius: 40px;
        }
      }
      /deep/ .average_xia_one {
        .average_xia_threes {
          .span {
            font-size: 24px;
          }
          .van-cell {
            padding: 0 30px;
          }
          .van-collapse-item__title {
            border-left: 10px solid#1196db;
            padding-left: 20px;
            margin-bottom: 20px;
            font-weight: 700;
            height: 70px;
            align-items: center;
          }
          .van-collapse-item__content {
            padding: 0 30px 10px 30px;
          }
          .average_xia_threes_div {
            font-size: 24px;
            margin: 5px 0;
            color: #878684;
          }
          .average_xia_sis {
            height: 140px;
            display: flex;
            margin-bottom: 30px;
            .average_xia_sis_img_zhong {
              margin: 0 10px;
            }
            .img {
              flex: 1;
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
</style>
